<!DOCTYPE html>
<html lang="en-US">
<head th:include="front/include :: front_header"></head>
   <body>
      <!-- Header Area Start -->
      <header th:include="front/topbar :: topbar"></header>
      <!-- Header Area End -->
       
       
      <!-- 中部开始 -->
      <section class="peulis-breadcrumb-area">
         <div class="breadcrumb-top">
            <div class="container">
               <div class="col-lg-12">
                  <div class="breadcrumb-box">
                     <h2>个人中心</h2>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!-- 中部结束 -->
       
       
      <!-- Checkout Page Area Start -->
      <section class="checkout-page-area section_70">
         <div class="container">
            <div class="row">
               <div class="col-lg-12">
                  <div class="checkout-left-box">
                     <h3>个人信息</h3>
                     <form id="memberForm">
                        <div class="row checkout-form">
                           <div class="col-md-6" hidden>
                              <input type="text" name="memberId"  th:value="${member.memberId}">
                           </div>
                           <div class="col-md-6">
                              <label for="name23">用户名：</label>
                              <input type="text" name="username" id="name23" th:value="${member.username}">
                           </div>
                           <div class="col-md-6">
                              <label for="name22">邮箱：</label>
                              <input type="email" name="email" id="name22" th:value="${member.email}">
                           </div>
                        </div>
                        <div class="row checkout-form">
                           <div class="col-md-12">
                              <label for="cntr2">昵称：</label>
                              <input type="text" name="name" id="cntr2" th:value="${member.name}">
                           </div>
                        </div>
                        <div class="row checkout-form">
                           <div class="col-md-12">
                              <label for="Town2">联系号码：</label>
                              <input type="text" name="mobile" id="Town2" th:value="${member.mobile}">
                           </div>
                        </div>
                        <div class="row checkout-form">
                           <div class="col-md-1">
                              <button type="button" id="submit" class="btn btn-info" style="background-color: #0d8ddb">提交</button>
                           </div>
                        </div>
                     </form>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!-- Checkout Page Area End -->
       
       
      <!-- Footer Area Start -->
      <footer class="peulis-footer-area" th:include="front/footer :: footer"></footer>
      <!-- Footer Area End -->
       
       
      <!-- Sidebar Navigation Start -->
      <div class="ct-sidenav">
         <button class="close"><i class="fa fa-times"></i></button>
         <img src="assets/img/logo.png" alt="Site Logo" />
         <div class="sidenav-info">
            <p>Lorem Ipsum is simply dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since when an unknown printer took a galley of type and scrambled it to make a type specimen book.printing and typesetting industry It has survived not only five centuries.</p>
            <ul class="sidenav-contact-info">
               <li>
                  <i class="fa fa-map-marker"></i>
                  <p>29 Division Pt <span>New York, NY 10002, USA</span></p>
               </li>
               <li>
                  <i class="fa fa-phone"></i>
                  <p> +0 (321) 984 754 <span>Give us a call</span></p>
               </li>
               <li>
                  <i class="fa fa-envelope"></i>
                  <p> support@example.com<span>24/7 online support</span></p>
               </li>
            </ul>
         </div>
         <div class="sidenav-social">
            <h3>Follow Us</h3>
            <ul>
               <li><a href="#"><i class="fa fa-twitter"></i></a></li>
               <li><a href="#"><i class="fa fa-pinterest-p"></i></a></li>
               <li><a href="#"><i class="fa fa-facebook"></i></a></li>
               <li><a href="#"><i class="fa fa-instagram"></i></a></li>
            </ul>
         </div>
      </div>
      <!-- Sidebar Navigation End -->


      <div th:include="front/include :: front_footer"></div>

   <script type="text/javascript">
      var ctx = "/cms/member"
       $(document).ready(function () {
           $("#submit").on('click', function () {
               $("#memberForm").submit();
               updateMember();
           });
       });

       function updateMember() {
          // 执行加载层
          var index = layer.load(1, {
             shade: [0.1, '#fff'] //0.1透明度的白色背景
          });
           $.ajax({
               type: "POST",
               url: ctx + "/selfUpdate",
               data: $('#memberForm').serialize(),
               success: function (r) {
                   if (r.code == 0) {
                      layer.msg(r.msg, {icon: 1})
                      layer.close(index)
                   } else {
                       layer.msg(r.msg);
                   }
               },
           });
       }
   </script>

   </body>
</html>

